---
title: Configuration
sort: 1
contributors:
  - sokra
  - skipjack
  - grgur
  - bondz
  - sricc
  - terinjokes
  - mattce
  - kbariotis
  - sterlingvix
  - jeremenichelli
  - dasarianudeep
  - lukasgeiter
  - EugeneHlushko
  - bigdawggi
  - anshumanv
  - textbook
---

Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is `src/index.js` and will output the result in `dist/main.js` minified and optimized for production.

Usually your projects will need to extend this functionality, for this you can create a `webpack.config.js` file in the root folder and webpack will automatically use it.

All the available configuration options are specified below.

T> New to webpack? Check out our guide to some of webpack's [core concepts](/concepts) to get started!

## Use different configuration file

If for some reason you want to use different configuration file depending on certain situations you can change this via command line by using the `--config` flag.

__package.json__

```json
"scripts": {
  "build": "webpack --config prod.config.js"
}
```

## Options

Click on the name of each option in the configuration code below to jump to the detailed documentation. Also note that the items with arrows can be expanded to show more examples and, in some cases, more advanced configuration.

W> Notice that throughout the configuration we use Node's built-in [path module](https://nodejs.org/api/path.html) and prefix it with the [__dirname](https://nodejs.org/docs/latest/api/globals.html#globals_dirname) global. This prevents file path issues between operating systems and allows relative paths to work as expected. See [this section](https://nodejs.org/api/path.html#path_windows_vs_posix) for more info on POSIX vs. Windows paths.

W> Notice that many array configurations allow to reference the default value via `"..."`.

__webpack.config.js__

```js-with-links-details
const path = require('path');

module.exports = {
  <mode "/configuration/mode">
    <default>
      mode: "production", // "production" | "development" | "none"
    </default>
    mode: "production", // enable many optimizations for production builds
    mode: "development", // enabled useful tools for development
    mode: "none", // no defaults
  </mode>
  // Chosen mode tells webpack to use its built-in optimizations accordingly.
  <entry "/configuration/entry-context/#entry">
    <default>
      entry: "./app/entry", // string | object | array
    </default>
    entry: ["./app/entry1", "./app/entry2"],
    entry: {
      a: "./app/entry-a",
      b: ["./app/entry-b1", "./app/entry-b2"]
    },
    entry: {
      a: {
        import: "./app/entry-a",
        library: { type: "commonjs-module" },
        dependOn: ["vendors"],
        filename: "entries/a.js",
        runtime: "dashboard",
        chunkLoading: "jsonp",
        wasmLoading: "fetch-streaming"
      },
      vendors: ["react", "react-dom"]
    }
  </entry>
  // defaults to ./src
  // Here the application starts executing
  // and webpack starts bundling
  <link "/configuration/output">
    <default>
      output: {
    </default>
  </link>
    // options related to how webpack emits results
    <path "/configuration/output/#outputpath">
      <default>
        path: path.resolve(__dirname, "dist"), // string (default)
      </default>
    </path>
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)
    <filename "/configuration/output/#outputfilename">
      <default>
        filename: "[name].js", // string (default)
      </default>
      filename: "[contenthash].js", // for long term caching
    </filename>
    // the filename template for entry chunks
    <publicPath "/configuration/output/#outputpublicpath">
      <default>
        publicPath: "/assets/", // string
      </default>
      publicPath: "auto", // determined automatically from script tag (default)
      publicPath: "", // relative to HTML file
      publicPath: "/", // relative to server root
      publicPath: "https://cdn.example.com/", // absolute URL
    </publicPath>
    // the url to the output directory resolved relative to the HTML page
    <library "/configuration/output/#outputlibrary">
      <default>
        library: { // There is also an old syntax for this available (click to show)
      </default>
      // Old syntax:
      library: "MyLibrary", // string,
      libraryTarget: "umd", // = library.type
      auxiliaryComment: "comment", // = library.auxiliaryComment
      libraryExport: "default", // = library.export
    </library>
      <libraryType "/configuration/output/#outputlibrarytype">
        <default>
          type: "umd", // universal module definition
        </default>
        type: "umd2", // universal module definition (but optional externals will use globals)
        type: "commonjs-module", // exported with module.exports
        type: "commonjs2", // old name for "commonjs-module"
        type: "commonjs", // exported as properties to exports
        type: "amd", // defined with AMD define() method
        type: "amd-require", // defined with AMD require() method (can't have exports)
        type: "system", // exported to System.js
        type: "this", // property set on this
        type: "var", // variable defined in root scope (default)
        type: "assign", // blind assignment
        type: "global", // property set to global object as specified in output.globalObject
        type: "window", // property set to window object
        type: "self", // property set to self object
        type: "jsonp", // jsonp wrapper
        type: "module", // EcmaScript Module (not implemented yet)
      </libraryType>
      // the type of the exported library
      <libraryName "/configuration/output/#outputlibraryname">
        <default>
          name: "MyLibrary", // string | string[]
        </default>
        name: ["MyCompany", "MyLibrary"], // Some types support creating nested objects
        name: undefined, // Some types support unnamed library (default)
      </libraryName>
      // the name of the exported library

      <advancedLibrary "#">
        <default>
          /* Advanced output.library configuration (click to show) */
        </default>
        export: "default", // string | string[]
        export: undefined, // expose the whole namespace object resp. module.exports value (default)
        export: "named", // expose named exports
        export: ["named", "property"], // expose nested properties
        // the export of the entry module that should be exposed
        auxiliaryComment: "comment",
        auxiliaryComment: { amd: "comment", commonjs: "comment", commonjs2: "comment", root: "comment" },
        // Add a comment in the UMD wrapper
        umdNamedDefine: false,
        // Use a named define() for the AMD part of the UMD wrapper
      </advancedLibrary>
    },
    uniqueName: "my-application", // (defaults to package.json "name")
    // unique name for this build to avoid conflicts with other builds in the same HTML
    name: "my-config",
    // name of the configuration, shown in output
    <advancedOutput "#">
      <default>
        /* Advanced output configuration (click to show) */
      </default>
      chunkFilename: "[name].js",
      chunkFilename: "[id].js",
      chunkFilename: "[contenthash].js", // for long term caching
      // the filename template for additional chunks
      assetModuleFilename: "[hash][ext][query]", // string
      // the filename template for asset modules
      webassemblyModuleFilename: "[hash].module.wasm", // string
      // the filename template for wasm modules
      sourceMapFilename: "[file].map", // string
      sourceMapFilename: "sourcemaps/[file].map", // string
      // the filename template of the source map location
      devtoolModuleFilenameTemplate: "webpack:///[resource-path]", // string
      // the name template for modules in a devtool
      devtoolFallbackModuleFilenameTemplate: "webpack:///[resource-path]?[hash]", // string
      // the name template for modules in a devtool (used for conflicts)
      crossOriginLoading: "use-credentials", // enum
      crossOriginLoading: "anonymous",
      crossOriginLoading: false,
      // specifies how cross origin request are issued by the runtime
      importFunctionName: "import", // string (default)
      // expression that is called when using import()
      // can be replaced to use polyfills
      importMetaName: "import.meta", // string (default)
      // expression that is used when using import.meta
      // can be replaced to use polyfills
    </advancedOutput>
    <expertOutput "#">
      <default>
        /* Expert output configuration 1 (on own risk) */
      </default>
      pathinfo: true, // boolean
      // include useful path info about modules, exports, requests, etc. into the generated code
      charset: true, // string
      // add charset attribute to injected script tags
      chunkLoadTimeout: 120000, // number (default)
      // timeout for loading chunks
      compareBeforeEmit: true, // boolean (default)
      // compare the generated asset with the asset on disk before writing to disk
      strictModuleExceptionHandling: true, // boolean
      // handle errors in module evaluation correctly, but for a performance cost
      devtoolNamespace: "MyLibrary", // string
      // prefix in the source names for devtools
      // defaults to output.uniqueName
      environment: {
        // Properties about the environment
        arrowFunction: true,
        bigIntLiteral: true,
        const: true,
        destructuring: true,
        dynamicImport: true,
        forOf: true,
        module: true
      },
      globalObject: "self", // string (default),
      // expression that points to the global object
      iife: true, // boolean (default)
      // wrap the bundle in a IIFE for isolation
      module: false, // boolean (default)
      // generate a module type javascript file instead of a classic script
      scriptType: "module"
      // adds a type attribute to injected script tags
    </expertOutput>
    <expertOutputB "#">
      <default>
        /* Expert output configuration 2 (on own risk) */
      </default>
      chunkLoading: "jsonp" // "jsonp" | "import-scripts" | "require" | "async-node" | false
      // method of loading chunks
      chunkLoadingGlobal: "myWebpackJsonp", // string
      // name of the global variable used to load chunks
      enabledChunkLoadingTypes: ["jsonp"], // string[]
      // the chunk loading methods that are available
      enabledLibraryTypes: ["var"], // string[]
      // the library types that are available
      enabledWasmLoadingTypes: ["var"], // string[]
      // the wasm loading methods that are available
      chunkFormat: "array-push",
      chunkFormat: "commonjs",
      chunkFormat: false,
      // the format of chunks
      hotUpdateMainFilename: "[fullhash].hot-update.json", // string
      // filename template for HMR manifest
      hotUpdateChunkFilename: "[id].[fullhash].hot-update.js", // string
      // filename template for HMR chunks
      hotUpdateGlobal: "hmrUpdateFunction", // string
      // the name of the global variable used to load hot update chunks
      sourcePrefix: "\t", // string
      // prefix module sources in bundle for better readablitity
      // but breaks multi-line template strings
      hashFunction: "md4", // string (default)
      // hash function used in general
      hashDigest: "hex", // string (default)
      // hash digest type used
      hashDigestLength: 20, // number (default)
      // length of hashes
      hashSalt: "salt", // string | Buffer
      // an additional hash salt to fix hash related issues or change the hash in general
    </expertOutputB>
  },
  module: {
    // configuration regarding modules
    rules: [
      // rules for modules (configure loaders, parser options, etc.)
      {
        // Conditions:
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // these are matching conditions, each accepting a regular expression or string
        // test and include have the same behavior, both must be matched
        // exclude must not be matched (takes preferrence over test and include)
        // Best practices:
        // - Use RegExp only in test and for filename matching
        // - Use arrays of absolute paths in include and exclude to match the full path
        // - Try to avoid exclude and prefer include
        // Each condition can also receive an object with "and", "or" or "not" properties
        // which are an array of conditions.
        issuer: /\.css$/,
        issuer: path.resolve(__dirname, "app"),
        issuer: { and: [ /\.css$/, path.resolve(__dirname, "app") ] },
        issuer: { or: [ /\.css$/, path.resolve(__dirname, "app") ] },
        issuer: { not: [ /\.css$/ ] },
        issuer: [ /\.css$/, path.resolve(__dirname, "app") ], // like "or"
        // conditions for the issuer (the origin of the import)
        <advancedConditions "#">
          <default>
            /* Advanced conditions (click to show) */
          </default>
          resource: /\.css$/,
          // matches the resource of the module, behaves equal to "test" and "include"
          compiler: /html-webpack-plugin/,
          // matches the name of the child compilation
          dependency: "esm", // import-style dependencies
          dependency: "commonjs", // require-style dependencies
          dependency: "amd", // AMD-style dependency
          dependency: "wasm", // WebAssembly imports section
          dependency: "url", // new URL(), url() and similar
          dependency: "worker", // new Worker() and similar
          dependency: "loader", // this.loadModule in loaders
          // matches the type of dependency
          descriptionData: { type: "module" },
          // matches information from the package.json
          mimetype: "text/javascript",
          // matches the mimetype in DataUris
          realResource: /\.css$/,
          // matches the resource but ignores when resource was been renamed
          resourceFragment: "#blah",
          // matches the fragment part of the resource request
          resourceQuery: "?blah"
          // matches the query part of the resource request
        </advancedConditions>

        // Actions:
        loader: "babel-loader",
        // the loader which should be applied, it'll be resolved relative to the context
        options: {
          presets: ["es2015"]
        },
        // options for the loader
        use: [
          // apply multiple loaders and options instead
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              // ...
            }
          }
        ]
        <moduleType "#">
          <default>
            type: "javascript/auto",
          </default>
          type: "javascript/auto", // JS with all features
          type: "javascript/esm", // JS enforced to strict ESM
          type: "javascript/dynamic", // JS enforced to non-ESM
          type: "json", // JSON data
          type: "webassembly/async", // WebAssembly as async module
          type: "webassembly/sync", // WebAssembly as sync module
        </moduleType>
        // specifies the module type
        <advancedActions "#">
          <default>
            /* Advanced actions (click to show) */
          </default>
          enforce: "pre",
          enforce: "post",
          // flags to apply these rules, even if they are overridden
          generator: { /* ... */ },
          // Options for the generator (depends on module type)
          parser: { /* ... */ },
          // Options for the parser (depends on module type)
          resolve: { /* ... */ },
          // Resolve options (same as "resolve" in configuration)
          sideEffects: false, // boolean
          // Overrides "sideEffects" from package.json
        </advancedActions>
      },
      {
        oneOf: [
          // ... (rules)
        ]
        // only use one of these nested rules
      },
      {
        // ... (conditions)
        rules: [
          // ... (rules)
        ]
        // use all of these nested rules (combine with conditions to be useful)
      },
    ],
    <advancedModule "#">
      <default>
        /* Advanced module configuration (click to show) */
      </default>
      noParse: [
        /special-library\.js$/
      ],
      // do not parse this module
      unknownContextRequest: ".",
      unknownContextRecursive: true,
      unknownContextRegExp: /^\.\/.*$/,
      unknownContextCritical: true,
      exprContextRequest: ".",
      exprContextRegExp: /^\.\/.*$/,
      exprContextRecursive: true,
      exprContextCritical: true,
      wrappedContextRegExp: /.*/,
      wrappedContextRecursive: true,
      wrappedContextCritical: false,
      // specifies default behavior for dynamic requests
    </advancedModule>
  },
  resolve: {
    // options for resolving module requests
    // (does not apply to resolving of loaders)
    <modules "/configuration/resolve/#resolvemodules">
      <default>
        modules: [
          "node_modules",
          path.resolve(__dirname, "app")
        ],
      </default>
      modules: [ "node_modules" ],
      // A filename (non-absolute) means this folder is looked up
      // in all parent directories
      modules: [ path.resolve(__dirname, "app") ],
      // An absolute path means exactly this folder
    </modules>
    // directories where to look for modules (in order)
    extensions: [".js", ".json", ".jsx", ".css"],
    // extensions that are used
    alias: {
      // a list of module name aliases
      // aliases are imported relative to the current context
      "module": "new-module",
      // alias "module" -> "new-module" and "module/path/file" -> "new-module/path/file"
      "only-module$": "new-module",
      // alias "only-module" -> "new-module", but not "only-module/path/file" -> "new-module/path/file"
      "module": path.resolve(__dirname, "app/third/module.js"),
      // alias "module" -> "./app/third/module.js" and "module/file" results in error
      "module": path.resolve(__dirname, "app/third"),
      // alias "module" -> "./app/third" and "module/file" -> "./app/third/file"
      [path.resolve(__dirname, "app/module.js")]: path.resolve(__dirname, "app/alternative-module.js"),
      // alias "./app/module.js" -> "./app/alternative-module.js"
    },
    <alias "/configuration/resolve/#resolvealias">
      <default>
        /* Alternative alias syntax (click to show) */
      </default>
      alias: [
        {
          name: "module",
          // the old request
          alias: "new-module",
          // the new request
          onlyModule: true
          // if true only "module" is aliased
          // if false "module/inner/path" is also aliased
        }
      ],
    </alias>
    <advancedResolve "/configuration/resolve/">
      <default>
        /* Advanced resolve configuration (click to show) */
      </default>
      conditionNames: ["myCompanyCondition", "..."],
      // conditions used for the "exports" and "imports" field in description file
      roots: [path.resolve(__dirname, "app/root")],
      // locations where to resolve server-relative requests (starting with "/")
      // This behavior is only applied when the request doesn't resolve as absolute path
      fallback: { "events": path.resolve(__dirname, "events.js") },
      // Similar to alias, but only applied when the normal resolving fails
      mainFields: ["main"],
      // properties that are read from description file
      // when a folder is requested
      restrictions: [ /\.js$/, path.resolve(__dirname, "app") ],
      // To successful resolve the result must match these criteria
      cache: true, // boolean
      // enable safe caching of resolving
      // this is safe as it tracks and validates all resolving dependencies
      unsafeCache: true,
      unsafeCache: {},
      // enables unsafe caching for resolved requests
      // this is unsafe as there is no validation
      // but performance improvement is really big
      plugins: [
        // ...
      ],
      // additional plugins applied to the resolver
    </advancedResolve>
    <expertResolve "/configuration/resolve/">
      <default>
        /* Expert resolve configuration (click to show) */
      </default>
      symlinks: true, // (default)
      // follow symlinks to new location
      descriptionFiles: ["package.json"], // (default)
      // files that are read for package description
      aliasFields: ["browser"],
      // properties that are read from description file
      // to alias requests in this package
      exportsFields: ["exports"], // (default)
      // fields in description file that are used for external module request
      importsFields: ["imports"], // (default)
      // fields in description file that are used for internal request
      mainFiles: ["index"],
      // files that are used when resolving in a directory and no mainField applies
      fullySpecified: true, // boolean
      // Input request is already full specified (it includes filename and extension)
      // Module requests are still resolved as usual
      preferRelative: true, // boolean
      // Try to resolve module requests also a relative request
      enforceExtension: false,
      // if true request must not include an extension
      // if false request may already include an extension
      cachePredicate: ({ path, request }) => true,
      // predicate function which selects requests for caching
      cacheWithContext: false, // (default)
      // include context information in cache key
      // This must be set to true when custom plugins resolve depending on
      // those information
      useSyncFileSystemCalls: false, // (default)
      // use sync fs calls instead of async fs calls
      byDependency: { commonjs: { extensions: [".js", "..."] } },
      // change resolving depending on issuer dependency
    </expertResolve>
  },
  performance: {
    <hints "/configuration/performance/#performancehints">
      <default>
        hints: "warning", // enum
      </default>
      hints: "error", // emit errors for perf hints
      hints: false, // turn off perf hints
    </hints>
    maxAssetSize: 200000, // int (in bytes),
    maxEntrypointSize: 400000, // int (in bytes)
    assetFilter: function(assetFilename) {
      // Function predicate that provides asset filenames
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },
  <devtool "/configuration/devtool">
    <default>
      devtool: "source-map", // enum
    </default>
    devtool: "inline-source-map", // inlines SourceMap into original file
    devtool: "hidden-source-map", // SourceMap without reference in original file
    devtool: "eval-source-map", // inlines SourceMap per module
    devtool: "cheap-source-map", // cheap-variant of SourceMap without module mappings
    devtool: "cheap-module-source-map", // cheap-variant of SourceMap with module mappings
    devtool: "eval-cheap-module-source-map", // like above but per module
    devtool: "eval", // no SourceMap, but named modules. Fastest at the expense of detail.
    devtool: false, // no SourceMap
  </devtool>
  // enhance debugging by adding meta info for the browser devtools
  // source-map most detailed at the expense of build speed.
  context: __dirname, // string (absolute path!)
  // the home directory for webpack
  // the entry and module.rules.loader option
  //   is resolved relative to this directory
  <target "/configuration/target">
    <default>
      target: "web", // enum
    </default>
    target: "browserslist", // use browserslist
    target: "browserslist:modern", // use browserslist "modern" preset
    target: "browserslist:Chrome >= 43", // use browserslist query
    target: `browserslist:${path.resolve(__dirname, "browserslist.json")}`,
    target: `browserslist:${path.resolve(__dirname, "browserslist.json")}:modern`,
    target: "webworker", // WebWorker
    target: "node", // Node.js via require
    target: "node10.13", // Node.js via require
    target: "async-node10.13", // Node.js via fs and vm
    target: "nwjs0.43", // nw.js
    target: "electron11.0-main", // electron, main process
    target: "electron11-renderer", // electron, renderer process
    target: "electron-preload", // electron, preload script
    target: ["web", "es5"], // combining targets
    target: ["web", "es2020"],
    target: false, // custom target, via plugin
  </target>
  // the environment in which the bundle should run
  // changes chunk loading behavior, available external modules
  // and generated code style
  <externals "/configuration/externals">
    <default>
      externals: ["react", /^@angular/],
    </default>
    externals: "react", // string (exact match)
    externals: /^[a-z\-]+($|\/)/, // Regex
    externals: { // object
      angular: "this angular", // this["angular"]
      react: { // UMD
        commonjs: "react",
        commonjs2: "react",
        amd: "react",
        root: "React"
      }
    },
    externals: ({ context, request }, callback) => { /* ... */ callback(null, "commonjs " + request); }
  </externals>
  // Don't follow/bundle these modules, but request them at runtime from the environment
  <externalsType "/configuration/externals">
    <default>
      externalsType: "var", // (defaults to output.library.type)
    </default>
    externalsType: "this", // this["EXTERNAL"]
    externalsType: "window", // window["EXTERNAL"]
    externalsType: "self", // self["EXTERNAL"]
    externalsType: "global", // property from output.globalObject
    externalsType: "commonjs", // require("EXTERNAL")
    externalsType: "amd", // define(["EXTERNAL"], ...), only with AMD library
    externalsType: "umd", // only with UMD library
    externalsType: "system", // only with System.js library
    externalsType: "jsonp", // only with jsonp library
    externalsType: "import", // import("EXTERNAL")
    externalsType: "module", // import X from "EXTERNAL"
    externalsType: "var", // EXTERNAL (name is an expression)
    externalsType: "promise", // await EXTERNAL (name is an expression giving a Promise)
  </externalsType>
  // Type of externals, when not specified inline in externals
  <externalsPresets "#">
    <default>
      externalsPresets: { /* ... */ },
    </default>
    externalsPresets: {
      electron: true,
      electronMain: true,
      electronPreload: true,
      electronRenderer: true,
      node: true,
      nwjs: true,
      web: true,
      webAsync: true,
    }
  </externalsPresets>
  // presets of externals
  <ignoreWarnings "#">
    <default>
      ignoreWarnings: [/warning/],
    </default>
    ignoreWarnings: [
      /warning/,
      {
        file: /asset/,
        module: /module/,
        message: /warning/,
      },
      (warning, compilation) => true
    ],
  </ignoreWarnings>
  <stats "/configuration/stats">
    <default>
      stats: "errors-only",
    </default>
    stats: "verbose", // nearly all information
    stats: "detailed", // much information
    stats: "minimal", // summarized information
    stats: "errors-warnings", // only errors and warnings
    stats: "errors-only", // only errors
    stats: "summary", // only one line summary
    stats: "none", // none at all
  </stats>
  stats: {
    // lets you precisely control what bundle information gets displayed
    <preset "/configuration/stats/#stats-presets">
      <default>
        preset: "errors-only",
      </default>
      preset: "verbose", // nearly all information
      preset: "detailed", // much information
      preset: "minimal", // summarized information
      preset: "errors-warnings", // only errors and warnings
      preset: "errors-only", // only errors
      preset: "summary", // only one line summary
      preset: "none", // none at all
    </preset>
    // A stats preset

    <advancedGlobal "/configuration/stats/">
      <default>
        /* Advanced global settings (click to show) */
      </default>
      all: false,
      // switch all flags on or off
      colors: true,
      // switch colors on and off
      context: __dirname,
      // all paths will be relative to this directory
      ids: true,
      // include module and chunk ids in the output
    </advancedGlobal>

    env: true,
    // include value of --env in the output
    outputPath: true,
    // include absolute output path in the output
    publicPath: true,
    // include public path in the output

    assets: true,
    // show list of assets in output
    <advancedAssets "/configuration/stats/">
      <default>
        /* Advanced assets settings (click to show) */
      </default>
      assetsSort: "size",
      // sorting of assets
      assetsSpace: 50,
      // number of asset lines to display
      cachedAssets: false,
      // show assets that are caching in output
      excludeAssets: /\.png$/,
      // hide some assets
      groupAssetsByPath: true,
      // group assets by their path in the output directory
      groupAssetsByExtension: true,
      // group assets by their extension
      groupAssetsByEmitStatus: true,
      // group assets depending if they are cached, emitted or compared
      groupAssetsByChunk: true,
      // group assets by how they relate to chunks
      groupAssetsByInfo: true,
      // group assets by meta information like immutable, development, etc.
      relatedAssets: true,
      // show assets that are related to other assets, like SourceMaps, compressed version, etc.
      performance: true,
      // show performance hints next to assets and modules
    </advancedAssets>

    entrypoints: true,
    // show entrypoints list
    chunkGroups: true,
    // show named chunk group list
    <advancedChunkGroups "/configuration/stats/">
      <default>
        /* Advanced chunk group settings (click to show) */
      </default>
      chunkGroupAuxiliary: true,
      // show auxiliary assets for entrypoints/chunk groups
      chunkGroupChildren
      // show child chunk groups for entrypoints/chunk groups
      chunkGroupMaxAssets: 5,
      // collapse chunk group assets lists when this limit has been reached
    </advancedChunkGroups>

    chunks: true,
    // show list of chunks in output
    <advancedChunks "/configuration/stats/">
      <default>
        /* Advanced chunk group settings (click to show) */
      </default>
      chunksSort: "size",
      // sort chunks list
      chunkModules: true,
      // show modules contained in each chunk
      chunkOrigins: true,
      // show the origin of a chunk (why was this chunk created)
      chunkRelations: true,
      // show relations to other chunks (parents, children, sibilings)
      dependentModules: true,
      // show modules that are dependencies of other modules in that chunk
    </advancedChunks>

    modules: true,
    // show list of modules in output
    <advancedModules "/configuration/stats/">
      <default>
        /* Advanced module settings (click to show) */
      </default>
      modulesSpace: 50,
      // number of modules lines to display
      nestedModules: true,
      // show nested modules (when concatenated)
      cachedModules: true,
      // show modules that were cached
      orphanModules: true,
      // show modules that are not referenced in optimized graph anymore
      excludeModules: /\.css$/,
      // hide some modules
      reasons: true,
      // show the reasons why modules are included
      source: true,
      // include the Source Code of modules (only in JSON)
    </advancedModules>
    <expertModules "/configuration/stats/">
      <default>
        /* Expert module settings (click to show) */
      </default>
      modulesSort: "size",
      // sort modules list
      groupModulesByPath: true,
      // group modules by their resource path
      groupModulesByExtension: true
      // group modules by their extension
      groupModulesByAttributes: true
      // group modules by attributes like if the have errors/warnings/assets
      // or are optional
      groupModulesByCacheStatus: true,
      // group modules depending if they are built, code was generated or if
      // they are cacheable in general
      depth: true,
      // show depth in the module graph of modules
      moduleAssets: true,
      // show assets emitted by modules in module list
      runtimeModules: true,
      // show runtime modules in the modules list
    </expertModules>

    <advancedStatsOptimization "/configuration/stats/">
      <default>
        /* Advanced optimization settings (click to show) */
      </default>
      providedExports: true,
      // show exports provided by modules
      usedExports: true,
      // show which exports are used by modules
      optimizationBailout: true,
      // show information why optimizations bailed out for modules
    </advancedStatsOptimization>

    children: true
    // show stats for child compilations

    logging: true,
    // show logging in output
    loggingDebug: /webpack/,
    // show debug type logging for some loggers
    loggingTrace: true,
    // show stack traces for warnings and errors in logging output

    warnings: true
    // show warnings

    errors: true,
    // show errors
    errorDetails: true,
    // show details for errors
    errorStack: true,
    // show internal stack trace for errors
    moduleTrace: true,
    // show module trace for errors
    // (why was causing module referenced)

    builtAt: true,
    // show timestamp in summary
    errorsCount: true,
    // show errors count in summary
    warningsCount: true,
    // show warnings count in summary
    timings: true,
    // show build timing in summary
    version: true,
    // show webpack version in summary
    hash: true,
    // show build hash in summary
  },
  devServer: {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    noInfo: true, // only errors & warns on hot reload
    // ...
  },
  experiments: {
    asyncWebAssembly: true,
    // WebAssembly as async module (Proposal)
    syncWebAssembly: true,
    // WebAssembly as sync module (deprecated)
    outputModule: true,
    // Allow to output ESM
    topLevelAwait: true,
    // Allow to use await on module evaluation (Proposal)
  }
  plugins: [
    // ...
  ],
  // list of additional plugins
  optimization: {
    chunkIds: "size",
    // method of generating ids for chunks
    moduleIds: "size",
    // method of generating ids for modules
    mangleExports: "size",
    // rename export names to shorter names
    minimize: true,
    // minimize the output files
    minimizer: [new CssMinimizer(), "..."],
    // minimizers to use for the output files

    <advancedOptimization "#">
      <default>
        /* Advanced optimizations (click to show) */
      </default>
      concatenateModules: true,
      // concatenate multiple modules into a single one
      emitOnErrors: true,
      // emit output files even if there are build errors
      flagIncludedChunks: true,
      // avoid downloading a chunk if it's fully contained in
      // an already loaded chunk
      innerGraph: true,
      // determine references without modules between symbols
      mergeDuplicateChunks: true,
      // merge chunks if they are equal
      nodeEnv: "production",
      // value of process.env.NODE_ENV inside of modules
      portableRecords: true,
      // use relative paths in records
      providedExports: true,
      // determine which exports are exposed by modules
      usedExports: true,
      // determine which exports are used by modules and
      // remove the unused ones
      realContentHash: true,
      // caculcate a contenthash for assets based on the content
      removeAvailableModules: true,
      // run extra pass to determine modules that are already in
      // parent chunks and remove them
      removeEmptyChunks: true,
      // remove chunks that are empty
      runtimeChunk: "single",
      // change placement of runtime code
      sideEffects: true,
      // skip modules that are side effect free when using reexports
    </advancedOptimization>

    splitChunks: {
      cacheGroups: {
        "my-name": {
          // define groups of modules with specific
          // caching behavior
          test: /\.sass$/,
          type: "css/mini-extract",

          <cacheGroupAdvancedSelectors "#">
            <default>
              /* Advanced selectors (click to show) */
            </default>
            chunks: "async",
            minChunks: 1,
            enforceSizeThreshold: 100000,
            minSize: 0,
            minRemainingSize: 0,
            usedExports: true,
            maxAsyncRequests: 30,
            maxInitialRequests: 30,
          </cacheGroupAdvancedSelectors>

          <cacheGroupAdvancedEffects "#">
            <default>
              /* Advanced effects (click to show) */
            </default>
            maxAsyncSize: 200000,
            maxInitialSize: 100000,
            maxSize: 200000,
            filename: "my-name-[contenthash].js",
            idHint: "my-name",
            name: false,
            hidePathInfo: true,
            automaticNameDelimiter: "-",
          </cacheGroupAdvancedEffects>
        }
      },

      <fallbackCacheGroup "#">
        <default>
          fallbackCacheGroup: { /* Advanced (click to show) */ }
        </default>
        fallbackCacheGroup: {
          automaticNameDelimiter: "-"
          minSize: 20000,
          maxAsyncSize: 200000,
          maxInitialSize: 100000,
          maxSize: 200000,
        },
      </fallbackCacheGroup>

      <advancedSelectors "#">
        <default>
          /* Advanced selectors (click to show) */
        </default>
        chunks: "all",
        // select which chunks should be optimized
        usedExports: true,
        // treat modules as equal only when used exports are equal
        minChunks: 1,
        // minimum number of chunks a module must be in
        enforceSizeThreshold: 100000,
        // ignore when following criterias when size of modules
        // is above this threshold
        minSize: 20000,
        // size of modules must be above this threshold
        minRemainingSize: 20000,
        // when modules are removed from a single chunk
        // the size of the modules that are remaining
        // must be above this threshold
        maxAsyncRequests: 30,
        maxInitialRequests: 30,
        // number of parallel requests for a single on demand loading
        // resp. entrypoint but be above this threshold
      </advancedSelectors>

      <advancedEffects "#">
        <default>
          /* Advanced effects (click to show) */
        </default>
        maxAsyncSize: 200000,
        maxInitialSize: 100000,
        maxSize: 200000,
        // when size of modules in the new chunk is above this
        // threshold, split it further
        filename: "[contenthash].js",
        // give the new chunk a different filename
        name: false, // false | string | (module, chunks, key) => string
        // give the new chunk a different name
        // when an existing name is used, chunks are merged
        // non-splitChunks chunks can only be selected, when they are
        // a parent or sibling chunk of all selected modules
        hidePathInfo: true,
        // hide path info when splitting via "maxSize"
        automaticNameDelimiter: "-",
        // use this separator to separate original name from path info
        // when splitting via "maxSize"
      </advancedEffects>

      <expert "#">
        <default>
          /* Expert settings (click to show) */
        </default>
        defaultSizeTypes: ["javascript", "..."]
        // when using numbers for sizes measure these size types
        // minSize: { javascript: 10000 } allows to be more specific
      </expert>
    }
  },
  <advanced "#">
    <default>
      /* Advanced configuration (click to show) */
    </default>
    loader: { /* ... */ },
    // add custom API or properties to loader context
    resolveLoader: { /* same as resolve */ }
    // separate resolve options for loaders
    node: {
      // Polyfills and mocks to run Node.js-
      // environment code in non-Node environments.
      global: true, // boolean
      // replace "global" with the output.globalObject
      __filename: "mock", // boolean | "mock" | "eval-only"
      __dirname: "mock", // boolean | "mock" | "eval-only"
      // true: includes the real path
      // "mock": includes a fake path
      // "eval-only": only defines it at compile-time
      // false: disables all handling
    },
    recordsPath: path.resolve(__dirname, "build/records.json"),
    recordsInputPath: path.resolve(__dirname, "build/records.json"),
    recordsOutputPath: path.resolve(__dirname, "build/records.json"),
    // store ids into a file to make the build even more deterministic
  </advanced>
  <advancedCaching "#">
    <default>
      /* Advanced caching configuration (click to show) */
    </default>
    cache: false, // boolean
    // disable/enable caching
    snapshot: {
      managedPaths: [ path.resolve(__dirname, "node_modules") ],
      // paths that are snapshot using only package.json name and version
      immutablePaths: [ path.resolve(__dirname, ".yarn/cache") ],
      // paths that doesn't need to be snapshot as they are immutable
      module: { timestamp: true, hash: true },
      resolve: { timestamp: true, hash: false },
      resolveBuildDependencies: { timestamp: true, hash: false },
      buildDependencies: { timestamp: true, hash: true },
      // snapshot method for different operations
    },
    watch: true, // boolean
    // enables watching
    watchOptions: {
      aggregateTimeout: 1000, // in ms
      // aggregates multiple changes to a single rebuild
      poll: true,
      poll: 500, // intervall in ms
      // enables polling mode for watching
      // must be used on filesystems that doesn't notify on change
      // i. e. nfs shares
    },
  </advancedCaching>
  <advancedBuild "#">
    <default>
      /* Advanced build configuration (click to show) */
    </default>
    infrastructureLogging: {
      level: "none",
      level: "error",
      level: "warn",
      level: "info", // (default)
      level: "log",
      level: "verbose",
      debug: true,
      debug: /webpack/,
      debug: [ "MyPlugin", /webpack/ ]
    },
    parallelism: 1, // number
    // limit the number of parallel processed modules
    profile: true, // boolean
    // capture timing information
    bail: true, //boolean
    // fail out on the first error instead of tolerating it.
    dependencies: ["name"],
    // When using an array of configs this can be used to reference other
    // configs and let this config run after the other config at initial build
  </advancedBuild>
```

W> webpack applies configuration defaults after [plugins defaults](/contribute/writing-a-plugin/#configuration-defaults) are applied.

Use [webpack-cli's `init` command](https://github.com/webpack/webpack-cli/tree/master/packages/init#cli-via-webpack-cli) to rapidly generate webpack configuration file for your project requirements, it will ask you a couple of questions before creating a configuration file.

```bash
npx webpack-cli init
```

npx might prompt you to install `@webpack-cli/init` if it is not yet installed in the project or globally. You might also get additional packages installed to your project depending on the choices you've made during the configuration generation.

```bash
npx webpack-cli init

ℹ INFO For more information and a detailed description of each question, have a look at https://github.com/webpack/webpack-cli/blob/master/INIT.md
ℹ INFO Alternatively, run `webpack(-cli) --help` for usage info.

? Will your application have multiple bundles? No
? Which module will be the first to enter the application? [default: ./src/index]
? Which folder will your generated bundles be in? [default: dist]:
? Will you be using ES2015? Yes
? Will you use one of the below CSS solutions? No

+ babel-plugin-syntax-dynamic-import@6.18.0
+ uglifyjs-webpack-plugin@2.0.1
+ webpack-cli@3.2.3
+ @babel/core@7.2.2
+ babel-loader@8.0.4
+ @babel/preset-env@7.1.0
+ webpack@4.29.3
added 124 packages from 39 contributors, updated 4 packages and audited 25221 packages in 7.463s
found 0 vulnerabilities


Congratulations! Your new webpack configuration file has been created!
```

[createapp.dev - create a webpack configuration in your browser](https://createapp.dev/webpack) is an online tool for creating custom webpack configuration. It allows you to select various features that will be combined and added to resulting configuration file. Also, it generates an example project based on provided webpack configuration that you can review in your browser and download.
